<template>
  <div
    class="rechargeContainer"
    :style="{
      paddingBottom: tempData.paddingBottom + 'px',
      paddingLeft: tempData.paddingTwice + 'px',
      paddingRight: tempData.paddingTwice + 'px',
      paddingTop: tempData.paddingTop + 'px',
      boxSizing: 'border-box',
    }"
  >
    <div
      class="content"
      :style="{
        overflow: 'hidden',
        borderTopLeftRadius: tempData.radiusNumTop + 'px',
        borderTopRightRadius: tempData.radiusNumTop + 'px',
        borderBottomLeftRadius: tempData.radiusNumBottom + 'px',
        borderBottomRightRadius: tempData.radiusNumBottom + 'px',
      }"
      ref="divDom"
    >
      <div
        :style="
          tempData.showType == 1
            ? {
                backgroundColor: tempData.boxBg,
              }
            : {
                backgroundImage: 'url(' + tempData.bgImage + ')',
                backgroundSize: '100% 100%',
              }
        "
      >
        <div
          class="classBox"
          :style="
            tempData.showPosi == 1
              ? {
                  justifyContent: 'flex-start',
                }
              : {
                  justifyContent: 'center',
                }
          "
        >
          <div
            class="items"
            v-if="tempData.activeType == 1"
            :style="
              tempData.showPosi == 1
                ? {
                    margin: '0px 14px 0px 0px',
                  }
                : {
                    margin: '0px 14px',
                  }
            "
          >
            <p class="names">无限叠加</p>
            <img src="@/assets/didaima/line1.png" class="lines" />
          </div>
          <div
            class="items2"
            :style="
              tempData.showPosi == 1
                ? {
                    margin: '0px 14px 0px 0px',
                  }
                : {
                    margin: '0px 14px',
                  }
            "
            v-else-if="tempData.activeType == 2"
          >
            <p
              class="names"
              :style="
                tempData.textActiveColor
                  ? {
                      color: tempData.textActiveColor,
                    }
                  : {
                      color: tempData.textColor,
                    }
              "
              >无限叠加</p
            >
            <img src="@/assets/didaima/line2.png" class="lines" />
          </div>
          <div class="items">
            <p
              class="names"
              :style="{
                color: tempData.textColor,
              }"
              >基础套餐</p
            >
            <div class="line"></div>
          </div>
          <div class="items">
            <p
              class="names"
              :style="{
                color: tempData.textColor,
              }"
              >加油包</p
            >
            <div class="line"></div>
          </div>
        </div>
        <div
          class="contentBox"
          v-show="tempData.tabs == 'setmeal'"
          :style="{
            maxHeight: tempData.maxHeight + 'px',
            overflowY: 'auto',
            scrollbarWidth: 'none',
          }"
        >
          <div
            class="boxs"
            v-for="(item, index) in mealList"
            :key="index"
            v-show="tempData.styleType != 3"
          >
            <div class="meal2Box" v-if="tempData.styleType == 1">
              <div class="leftbox">
                <img src="@/assets/didaima/yidong.png" class="iconImage" alt="" />
                <div class="leftItem">
                  <p class="title">{{ item.name }}</p>
                  <div class="bottoms">
                    <p class="num_times"
                      >流量：{{ item.nums }}G&nbsp;&nbsp;&nbsp;&nbsp;有效期：{{ item.times }}月</p
                    >
                  </div>
                </div>
              </div>
              <p class="price"><span>￥</span>{{ item.price }}00</p>
            </div>
            <div class="meal1Box" v-else>
              <p class="title">{{ item.name }}</p>
              <div class="bottoms">
                <p class="num_times"
                  >流量：{{ item.nums }}G&nbsp;&nbsp;&nbsp;&nbsp;有效期：{{ item.times }}月</p
                >
                <p class="price"><span>￥</span>{{ item.price }}</p>
              </div>
            </div>
          </div>
          <div
            class="linesbox"
            v-for="(item, index) in mealList"
            :key="index"
            v-show="tempData.styleType == 3"
          >
            <div
              class="line1"
              :style="{
                textAlign: tempData.setMealSet.line1.align,
                fontSize: tempData.setMealSet.line1.px + 'px',
                color: tempData.setMealSet.line1.bgColor,
              }"
            >
              <p class="line1Text1" v-if="tempData.setMealSet.line1.text == 'price_time'">
                <span>{{ item.price }}</span
                >元/{{ item.times }}月
              </p>
              <p class="line1Text1" v-if="tempData.setMealSet.line1.text == 'price'"
                >{{ item.price }}元</p
              >
              <p class="outlineText" v-if="tempData.setMealSet.line1.text == 'outline'"
                ><span> {{ item.price }}元</span></p
              >
              <p class="line1Text1" v-if="tempData.setMealSet.line1.text == 'name'">{{
                item.name
              }}</p>
              <p class="line1Text1" v-if="tempData.setMealSet.line1.text == 'userText'"
                >这是用户自定义文字</p
              >
              <p class="line1Text1" v-if="tempData.setMealSet.line1.text == 'userText2'"
                >这是用户自定义文字111111111111111111</p
              >
            </div>
            <div
              class="line2"
              :style="{
                textAlign: tempData.setMealSet.line2.align,
                fontSize: tempData.setMealSet.line2.px + 'px',
                color: tempData.setMealSet.line2.bgColor,
              }"
            >
              <p class="line1Text1" v-if="tempData.setMealSet.line2.text == 'price_time'">
                <span>{{ item.price }}</span
                >元/{{ item.times }}月
              </p>
              <p class="line1Text1" v-if="tempData.setMealSet.line2.text == 'price'"
                >{{ item.price }}元</p
              >
              <p class="outlineText" v-if="tempData.setMealSet.line2.text == 'outline'"
                ><span>{{ item.price }}元</span></p
              >

              <p class="line1Text1" v-if="tempData.setMealSet.line2.text == 'name'">{{
                item.name
              }}</p>
              <p class="line1Text1" v-if="tempData.setMealSet.line2.text == 'userText'"
                >这是用户自定义文字</p
              >
              <p class="line1Text1" v-if="tempData.setMealSet.line2.text == 'userText2'"
                >这是用户自定义文字</p
              >
            </div>
            <div
              class="line3"
              :style="{
                textAlign: tempData.setMealSet.line3.align,
                fontSize: tempData.setMealSet.line3.px + 'px',
                color: tempData.setMealSet.line3.bgColor,
              }"
            >
              <p class="line1Text1" v-if="tempData.setMealSet.line3.text == 'price_time'">
                <span>{{ item.price }}</span
                >元/{{ item.times }}月
              </p>
              <p class="line1Text1" v-if="tempData.setMealSet.line3.text == 'price'"
                >{{ item.price }}元</p
              >
              <p class="outlineText" v-if="tempData.setMealSet.line3.text == 'outline'">
                <span>{{ item.price }}元</span></p
              >
              <p class="line1Text1" v-if="tempData.setMealSet.line3.text == 'name'">{{
                item.name
              }}</p>
              <p class="line1Text1" v-if="tempData.setMealSet.line3.text == 'userText'"
                >这是用户自定义文字</p
              >
              <p class="line1Text1" v-if="tempData.setMealSet.line3.text == 'userText2'"
                >这是用户自定义文字</p
              >
            </div>
            <div
              class="line4"
              :style="{
                textAlign: tempData.setMealSet.line4.align,
                fontSize: tempData.setMealSet.line4.px + 'px',
                color: tempData.setMealSet.line4.bgColor,
              }"
            >
              <p class="line1Text1" v-if="tempData.setMealSet.line4.text == 'price_time'">
                <span>{{ item.price }}</span
                >元/{{ item.times }}月
              </p>
              <p class="line1Text1" v-if="tempData.setMealSet.line4.text == 'price'"
                >{{ item.price }}元</p
              >
              <p class="outlineText" v-if="tempData.setMealSet.line4.text == 'outline'">
                <span>{{ item.price }}元</span></p
              >
              <p class="line1Text1" v-if="tempData.setMealSet.line4.text == 'name'">{{
                item.name
              }}</p>
              <p class="line1Text1" v-if="tempData.setMealSet.line4.text == 'userText'"
                >这是用户自定义文字</p
              >
              <p class="line1Text1" v-if="tempData.setMealSet.line4.text == 'userText2'"
                >这是用户自定义文字</p
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch, onMounted } from 'vue'

  const props = defineProps({
    // 选中的当前组件参数
    compObj: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
  console.log(props)
  const tempData: any = ref({})
  const mealList = ref([
    { name: '流量3000G—全国通用高速流量', price: 10, nums: 3000, times: 1 },
    { name: '流量3000G—全国通用高速流量', price: 10, nums: 3000, times: 1 },
    { name: '流量3000G—全国通用高速流量', price: 10, nums: 3000, times: 1 },
    { name: '流量3000G—全国通用高速流量', price: 10, nums: 3000, times: 1 },
  ])
  const divDom = ref()
  const items = ref()
  const items2 = ref()
  const btnWidth = ref('')
  const btnWidth2 = ref('')
  watch(
    () => props.compObj,
    (newVal, oldVal) => {
      tempData.value = JSON.parse(JSON.stringify(newVal))
      if (items.value && tempData.value.tabs == 'setmeal') {
        btnWidth.value =
          (items.value - (tempData.value.setMealSet.linBoxnum - 1) * 10) /
            tempData.value.setMealSet.linBoxnum +
          'px'
        btnWidth2.value =
          (items2.value - (tempData.value.setMealSet.linBoxnum - 1) * 10) /
            tempData.value.setMealSet.linBoxnum +
          'px'
        console.log(items2.value - (tempData.value.setMealSet.linBoxnum - 1) * 10)
      }
    },
    { immediate: true, deep: true }
  )
  const clickTabs = (val: any) => {
    console.log(val)
    const a = props.compObj
    a.tabs = val
    console.log(tempData.value.tabs)
  }
  onMounted(() => {
    items.value = divDom.value.offsetWidth - 20
    items2.value = divDom.value.offsetWidth - 40
  })
</script>

<style scoped lang="less">
  .content {
    width: 100%;
    height: auto;

    .contentBox {
      width: 100%;
      padding: 0px 10px 0px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .box_content {
        width: 100%;
        border: 1px solid #e7e6e4;
        border-radius: 10px;
        padding: 10px;
        box-sizing: border-box;
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .titles {
          width: 100%;
          font-size: 15px;
          color: #545454;
        }
        .linesbox {
          width: v-bind(btnWidth2);
          border-radius: 10px;
          border: 1px solid #e7e6e4;
          padding: 12px 6px;
          box-sizing: border-box;
          margin-top: 10px;
          .line1,
          .line4 {
            width: 100%;
            .line1Text1 {
              width: 100%;
              color: #303133;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              text-align: center;
              span {
                font-size: 16px;
                font-weight: bold;
              }
            }
            .outlineText {
              width: 100%;
              color: #3c9cff;
              text-align: center;
              span {
                text-decoration: line-through;
              }
            }
          }
          .line2,
          .line3 {
            margin: 6px 0px;
            width: 100%;
            .line1Text1 {
              width: 100%;

              color: #3c9cff;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              text-align: center;
              span {
                font-size: 16px;
                font-weight: bold;
              }
            }
            .outlineText {
              width: 100%;

              color: #3c9cff;
              text-align: center;
              span {
                text-decoration: line-through;
              }
            }
          }
        }
        .boxs {
          width: 100%;
          border: 1px solid #e7e6e4;
          border-radius: 10px;
          padding: 14px 14px;
          box-sizing: border-box;
          margin-top: 10px;
          .title {
            width: 100%;
            font-size: 16px;
          }
          .bottoms {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-top: 12px;
            .num_times {
              font-size: 13px;
              color: #545454;
            }
            .prices {
              font-size: 13px;
              color: #545454;
              span {
                color: #3c9cff;
              }
            }
            .price {
              font-size: 24px;
              line-height: 24px;
              color: #3c9cff;
              display: flex;
              align-items: flex-end;
              span {
                font-size: 14px;
                line-height: 20px;
                color: #3c9cff;
              }
            }
          }
        }
      }
      .linesbox {
        width: calc((100% - 10px) / 2);
        border-radius: 10px;
        border: 1px solid #e7e6e4;
        padding: 12px 6px;
        box-sizing: border-box;
        margin-bottom: 10px;
        .line1,
        .line4 {
          width: 100%;
          .line1Text1 {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
            span {
              font-size: 16px;
              font-weight: bold;
            }
          }
          .outlineText {
            width: 100%;
            text-align: center;
            span {
              text-decoration: line-through;
            }
          }
        }
        .line2,
        .line3 {
          margin: 6px 0px;
          width: 100%;
          .line1Text1 {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
            span {
              font-size: 16px;
              font-weight: bold;
            }
          }
          .outlineText {
            width: 100%;
            text-align: center;
            span {
              text-decoration: line-through;
            }
          }
        }
      }
      .boxs {
        width: 100%;
        border: 1px solid #e7e6e4;
        border-radius: 10px;
        padding: 10px 10px;
        box-sizing: border-box;
        margin-bottom: 10px;
        .meal2Box {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .leftbox {
            display: flex;

            .leftItem {
              display: flex;
              flex-wrap: wrap;
              padding: 10px 0px;
              box-sizing: border-box;
              align-content: space-between;
              width: calc(100% - 75px);
              .title {
                width: 100%;
                line-height: 16px;
                font-size: 16px;
                white-space: nowrap; /* 防止文本换行 */
                overflow: hidden; /* 隐藏溢出的内容 */
                text-overflow: ellipsis; /* 显示省略号来表示溢出 */
              }
              .bottoms {
                display: flex;
                justify-content: space-between;

                margin-top: 12px;
                .num_times {
                  font-size: 13px;
                  line-height: 13px;
                  color: #545454;
                }
              }
            }
            .iconImage {
              width: 70px;
              height: 70px;
              margin-right: 5px;
            }
          }

          .price {
            margin-top: 34px;
            font-size: 24px;
            line-height: 24px;
            color: #3c9cff;
            display: flex;
            font-weight: bold;
            align-items: flex-end;
            span {
              font-size: 14px;
              line-height: 20px;
              color: #3c9cff;
              font-weight: 400;
            }
          }
        }
        .meal1Box {
          .title {
            width: 100%;
            font-size: 16px;
          }
          .bottoms {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-top: 12px;
            .num_times {
              font-size: 13px;
              color: #545454;
            }
            .prices {
              font-size: 13px;
              color: #545454;
              span {
                color: #3c9cff;
              }
            }
            .price {
              font-size: 24px;
              line-height: 24px;
              color: #3c9cff;
              display: flex;
              font-weight: bold;
              align-items: flex-end;
              span {
                font-size: 14px;
                line-height: 20px;
                color: #3c9cff;
                font-weight: 400;
              }
            }
          }
        }
      }
    }
    .classBox {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 15px 10px 1px;
      box-sizing: border-box;
      .items2 {
        width: 64px;
        margin: 0px 14px;
        padding-bottom: 15px;
        box-sizing: border-box;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        .names {
          width: 100%;
          text-align: center;
          color: #333333;
        }
        .lines {
          width: 20px;
          height: 20px;
          margin-top: -10px;
          position: absolute;
          right: -5px;
          bottom: 10px;
        }
        .line {
          width: 24px;
          height: 25px;
          margin-top: -10px;
        }
      }
      .items {
        width: 64px;
        margin: 0px 14px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .names {
          width: 100%;
          text-align: center;
          color: #333333;
        }
        .lines {
          width: 24px;
          height: 25px;
          margin-top: -10px;
        }
        .line {
          width: 24px;
          height: 25px;
          margin-top: -10px;
        }
      }
    }
  }
</style>
